<template>
  <div class="realitive bgw">
    <section class="flex_bt">
      <div class="mg25">
        <img v-if="companyData.webinarCompanyLogo" @click="gohref()" class="home_logo"
          :src="companyData.webinarCompanyLogo.indexOf('http') > -1 ? companyData.webinarCompanyLogo : 'https://img1.17img.cn/17img' + companyData.webinarCompanyLogo"
          alt="" />
        <div>
          <div class="mb12">
            <span class="company_title" @click="gohref()">{{ companyData.webinarCompanyName }}</span>
            <span class="company_rz">
              <svg-icon icon-class="icon-auth" class="svg-icon"></svg-icon>
              已认证</span>
          </div>
          <div class="flex" style="align-items: center">
            <span v-if="companyData.memberType == 14" class="vip_hybg vip_qj">旗舰会员</span>
            <span v-if="companyData.memberType == -1 || companyData.memberType == 0" class="vip_hybg vip_mf">免费会员</span>
            <span v-if="companyData.memberType == 15" class="vip_hybg vip_zy">专业会员</span>
            <span v-if="companyData.memberType == 16" class="vip_hybg vip_bz">标准会员</span>
            <span v-if="companyData.memberType == 14 || companyData.memberType == 15 || companyData.memberType == 16"
              class="vip_time">{{ companyData.memberEndtime }} 会员到期</span>
            <span v-if="companyData.memberType == -1" class="vip_time">会员已于 {{ companyData.memberEndtime }} 到期</span>
          </div>
        </div>
      </div>
      <div class="company_right">
        <div class="flex_center zb mr18" @click="goSelf(1)">
          <img src="@/assets/img/zhibo.png" class="icon_left" alt="" />
          <span>自助直播</span>
        </div>
        <div class="flex_center video" @click="goSelf(2)">
          <img src="@/assets/img/shipin.png" class="icon_left" alt="" />
          <span>发布视频</span>
        </div>
      </div>
    </section>
    <img src="../../../assets/img/bj_tu.png" class="right_img" alt="">
    <img v-if="companyData.isFree==1" src="https://img1.17img.cn/ui/simg/instrument/20230904/sy.png"  class="top_img">
  </div>
</template>

<script>
import api from '@/api/index'
import { changeDateFormat2 } from '@/utils/commin.js'
export default {
  data() {
    return {
      companyData: {}
    }
  },
  mounted() {
    this.getComapany()
  },
  computed: {
    imShowId() {
      return this.$store.getters.imShowId;
    },
  },
  methods: {
    goSelf(val) {
      if (val == 1) {
        let form = {
          imshowId: this.imShowId,
        };
        api.common.getCompanyAllServiceNum(form).then((res) => {

          if (res.data.self_meet_num - res.data.self_meet_num_used > 0) {
            this.$router.push('/selfCreate/step1')
          } else {
            this.$message({ type: 'error', message: '自助会议权限不足！' })
          }
        });

      } else {
        this.$router.push('/video/videolistadd')
      }
    },
    gohref() {
      window.open(`https://www.instrument.com.cn/webinar/organ/detail_${this.companyData.webinarCompanyAccount}.html`)
    },
    getComapany() {
      let form = {
        imshowId: this.imShowId
      }
      api.home.getComapany(form).then(res => {
        this.companyData = res.data
        this.companyData.memberEndtime = changeDateFormat2(this.companyData.memberEndtime)
        this.$store.dispatch("root/setCompanyData", this.companyData);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top_img{
  position: absolute;
    width: 38px;
    top: 0;
    left: 0;
}
.flex_bt {
  @include flex(row, flex-end, space-between);
  width: 100%;
  position: relative;
  z-index: 2;

  .mg25 {
    margin: 25px 30px;
    @include flex(row, flex-start, flex-start);

    .home_logo {
      display: inline-block;
      width: 102px;
      height: 47px;
      object-fit: contain;
      padding: 6px 2px;
      background: #fff;
      margin-right: 21px;
      border: 1px solid #e5eaf0;
      cursor: pointer;
    }

    .mb12 {
      margin-bottom: 12px;
      margin-top: 4px;

      .company_title {
        font-size: 18px;
        font-weight: 600;
        color: #202933;
        line-height: 19px;
        margin-right: 10px;
        cursor: pointer;
      }

      .company_rz {
        font-size: 12px;
        color: #0c7ff2;
        line-height: 14px;
        display: inline-block;
        padding: 3px 7px;
        background: #e7f3ff;
        padding-bottom: 4px;
      }
    }

    .vip_hybg {
      display: inline-block;
      font-weight: 600;
      color: #FFFFFF;
      font-size: 12px;
      height: 20px;
      line-height: 18px;
      padding-left: 30px;
      padding-right: 10px;
      font-size: 12px;
      transform: scale(0.91, 0.91);
      margin-right: 10px;
    }

    .vip_qj {
      background: url('../../../assets/img/qijian.png') no-repeat;
      background-size: 100%;
    }

    .vip_mf {
      background: url('../../../assets/img/mianfei.png') no-repeat;
      background-size: 100%;
    }

    .vip_bz {
      background: url('../../../assets/img/biaozhun.png') no-repeat;
      background-size: 100%;
    }

    .vip_zy {
      background: url('../../../assets/img/zhuanye.png') no-repeat;
      background-size: 100%;
    }

    .vip_img {
      display: inline-block;
      width: 75px;
      object-fit: contain;
      margin-right: 10px;
    }

    .vip_time {
      font-size: 14px;
      color: #7e8790;
      line-height: 14px;
    }
  }

  .company_right {
    padding-bottom: 20px;
    @include flex(row, center, flex-start);
    // background: url("../../../assets/img/bj_tu.png") top right no-repeat;
    padding: 65px 16.11vw 20px 0;

    // background-size: 83%;
    .flex_center {
      @include flex(row, center, flex-start);
      padding: 8px 12px;
      width: inherit;

      .icon_left {
        width: 16.5px;
        display: inline-block;
        padding-right: 10px;
      }

      span {
        font-size: 12px;
        color: #ffffff;
        line-height: 14px;
      }
    }

    .zb {
      background: linear-gradient(360deg, #728fff 0%, #5c71fe 100%);
      box-shadow: 0px 5px 3px -4px rgba(68, 118, 243, 0.36);
      cursor: pointer;
    }

    .video {
      background: linear-gradient(180deg, #126dff 0%, #609eff 100%);
      box-shadow: 0px 5px 3px -4px rgba(68, 118, 243, 0.36);
      cursor: pointer;
    }

    .mr18 {
      margin-right: 18px;
    }
  }
}
@media only screen and (min-width: 1000px) and (max-width: 1450px) {
  .company_right{
    padding: 65px 13.11vw 20px 0 !important; 
  }
  .mg25{
    margin-right: 0px !important;
  }
}
.right_img {
  position: absolute;
  right: 0;
  top: 0;
  width: 450px;
  z-index: 1;
}</style>